import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import TypeSelectLayout from '@/layouts/TypeSelectLayout';
import { getUseInfo, USER_INFO } from '@/utils/cookie';
import { Card } from 'antd';
import PasswordChange from './components/PasswordChange';
import PhoneChange from './components/PhoneChange';
import GraphicChange from './components/GraphicChange';

const RoleMgt = () => {
  const [tableType, setTableType] = useState('UpassWord');
  const [info, setInfo] = useState([]);
  const [rolefo, setRolefo] = useState([]);
  const [groupfo, setGroupfo] = useState([]);

  useEffect(() => {
    if (JSON.parse(getUseInfo(USER_INFO))) {
      setInfo(JSON.parse(getUseInfo(USER_INFO)));
    }
    setRolefo(JSON.parse(getUseInfo(USER_INFO)).role);
    setGroupfo(JSON.parse(getUseInfo(USER_INFO)).roleGroup);
  }, [getUseInfo(USER_INFO)]);

  const tabs = [
    {
      id: 'UpassWord',
      label: '密码修改',
    },
    {
      id: 'Uphone',
      label: '手机号邮箱修改',
    },
    {
      id: 'Upic',
      label: '机构展示图片修改',
    },
  ];

  const onTabChange = id => {
    setTableType(id);
  };
  return (
    <>
      <Card bordered={false} id="Card">
        <div
          style={{
            width: 500,
            lineHeight: '20px',
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <p>
            {' '}
            用户名称：<span>{info.username}</span>
          </p>
          <p>
            用户角色：<span>{groupfo.name}</span>
          </p>
          <p>
            认证主体类型：<span>{rolefo.name}</span>
          </p>
        </div>
      </Card>
      <TypeSelectLayout tabs={tabs} hidePublish onTabChange={onTabChange}>
        {tableType === 'UpassWord' && <PasswordChange />}
        {tableType === 'Uphone' && <PhoneChange />}
        {tableType === 'Upic' && <GraphicChange />}
      </TypeSelectLayout>
    </>
  );
};

export default connect(({ smManInforRule }) => ({
  smManInforRule,
}))(RoleMgt);
